<template>
    <div class="subapp">
    <!--  -->
    <div class="contain">
    <!--  -->
    <div class="div">
    <span class="tag">品牌</span>
    <p><a v-for=" i in list.brands" :key="i.id">{{i.name}}</a></p>
    </div>
    <div class="div" v-for="item in list.saleProperties" :key="item.id" >
    <span class="tag">{{item.name}}</span>
    <p><a type='info' v-for=" sub in item.properties" :key="sub.id">{{sub.name}}</a></p>
    </div>
    </div>
 <!-- {{$route.params.id}} -->

    </div>

</template>

<script setup>

import {useRoute} from 'vue-router'
import {useStore} from 'vuex' 
import {ref} from 'vue'
import {Filter} from '@/api/http'
const store = useStore();
const route = useRoute();
const list = ref([])
   console.log("route.params.id", route.params.id);
   const getData = async() =>{
    const  {data: res} = await  Filter(route.params.id)
    console.log('二级分类',res)
    list.value = res.result
}
 getData()
</script>

<style lang="less" scoped>
.subapp{
    width: 100%;
}
.contain{
    background-color: #fff;
    min-height: 500px;
}



.div{
    display: flex;
     padding: 10px;
     margin: 20px 0;
    align-items: center;
     
    .tag{
        display: inline-block;
        min-width: 100px;
        color: #999;
        overflow: hidden;
       
        
    }
    
    p{
        margin-left: 40px;
     a{
        color: #333;
        display: inline-flex;
        margin-left: 30px;
       padding: 5px;
        cursor: pointer;
      }
    }
    
}
</style>